import React, { useEffect } from "react";
import { useRootData } from "../../tools/useRootData";
import { Link } from "react-router-dom";

const List: React.FC = () => {
  const { isLoading, BookArr, loadData } = useRootData((store) => ({
    isLoading: store.bookStore.isLoading,
    BookArr: store.bookStore.BookArr,
    loadData: store.bookStore.asyncLoad,
  }));

  useEffect(() => {
    loadData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      {isLoading ? (
        <div>loading...</div>
      ) : (
        <ul>
          {BookArr.map((book: any) => (
            <li key={book.id}>
              <Link to={`/detail/${book.id}`}>{book.name}</Link>
            </li>
          ))}
        </ul>
      )}
      {!isLoading && <button onClick={() => loadData()}>重新加载</button>}
    </div>
  );
};

export default List;
